﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网站图片提示效果</title>
<style type="text/css">
	body{ margin:0;padding:40px; background:#fff;color:#555;line-height:180%;}
	img{ border:none;}
	ul,li{ margin:0;padding:0;}
	li{list-style:none; float:left; display:inline; margin-right:10px; border:1px solid #aaa;}
#tooltip{
	position:absolute;border:1px solid #ccc;background:#333;padding:2px;display:none;color:#fff;
}

</style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var x = 10;
        var y = 20;
        $("a.tool").mouseover(function (e) {
            this.myTitle = this.title; //把tile属性获取出来
            imgTitle = this.myTitle ? "<br/>" + this.myTitle : ""; //判断this.myTitle是否为空,三元运算符的使用
            //设置显示大图的div及在下方的提示性文字
            var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "</div>";
            //把准备好的div追加到当前的文档中
            $("body").append(tooltip);
            //设置div的位置及显示
            $("#tooltip").css({
                "top": (e.pageY + y) + "px", //设置横纵坐标
                "left": (e.pageX + x) + "px"
            }).show('fast'); //并快速显示出来
        }).mouseout(function () {
            this.title = this.myTitle;//重新赋标题的值
            //动态创建的层移除
            $("#tooltip").remove();
        }).mousemove(function (e) {
            $("#tooltip").css({
                "top": (e.pageY + y) + "px", //设置横纵坐标
                "left": (e.pageX + x) + "px"
            })
        });

    });
</script>
</head>

<body>
	<h3>有效果：</h3>
	<ul>
		<li><a href="images/apple_1_bigger.jpg" class="tool" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
		<li><a href="images/apple_2_bigger.jpg" class="tool" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
		<li><a href="images/apple_3_bigger.jpg" class="tool" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
		<li><a href="images/apple_4_bigger.jpg" class="tool" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
	</ul>
 
 
<br/><br/><br/><br/>
<br/><br/><br/><br/>
 
 
<h3>无效果：</h3>
<ul>
		<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
		<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
		<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
		<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
	</ul>

</body>
</html>

</html>
